<template>
<div>
    <van-row>
        <van-col span="2" offset="11">
            <div v-if="topLoading">
                <van-loading vertical color="#87CEFA" size="24" />
            </div>
        </van-col>
    </van-row>
    <van-tabs sticky swipeable background="#FFDEAD" type="line" scrollspy="true" @change="changeTab">
        <van-tab v-for="nav in navList" :title="nav.name" v-bind:key="nav.id">
        </van-tab>
    </van-tabs>
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="4000" duration="1000" style="witdh:100%,height:400px">
        <block v-for="(item, index) in banners" :key="key" :index="index">
            <swiper-item>
                <navigator :url="item.url">
                    <image :src="item.imgUrl" class="slide-image" mode="aspectFill" />
                </navigator>
            </swiper-item>
        </block>
    </swiper>

    <van-divider content-position="center" dashed="true" hairline="2px">商品列表</van-divider>
    <van-card v-for="(goods, index) in goodsList" :key="index" :num="goods.num" :price="goods.price" :desc="goods.descript" :title="goods.name" :thumb="goods.imgUrl" @click="viewGoodsDetail(goods.id)">
        <view slot="footer">
            <div v-if="goods.favorite">
                <van-button icon="like" color="#EE6363" size="small" @click.stop="add''''ArrayLike(goods.id)">喜欢</van-button>
            </div>
            <div v-else>
                <van-button icon="like-o" size="small" @click.stop="addLike(goods.id)">喜欢</van-button>
            </div>
        </view>
    </van-card>
    <div v-if="footLoading">
        <van-loading vertical color="#87CEFA" size="24" />
    </div>
</div>
</template>

<script>
import card from "@/components/card";
import utils from "@/utils/index.js";
import store from "@/utils/store.js";
export default {
    config: {
        navigationBarTitleText: "音识小铺",
    },
    data() {
        return {
            index: -1,
            topLoading: false,
            footLoading: false,
            banners: [],
            navList: [],
            goodsList: [],
            activeNav: 0,
            listQuery: {
                page: 1,
                limit: 10,
                idCategory: undefined,
            },
        };
    },
    components: {
        card,
    },
    onPullDownRefresh: function () {
        this.topLoading = true;
        //刷新页面内容
        this.$API
            .get("category/list")
            .then((res) => {
                this.navList = res.data;
                this.topLoading = false;
                this.banners = this.processBanners(res.data[0].bannerList)
                this.listQuery.idCategory = res.data[0].id
                this.listQuery.page = 1;
                this.goodsList = []
                this.getGoodsList()
            })
            .catch((e) => {
                this.topLoading = false;
                console.log("e", e);
                wx.showToast({
                    title: "系统开小差了~", //提示的内容,
                    icon: "error", //图标,
                    duration: 2000, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                });
            });
    },
    onReachBottom: function () {
        this.footLoading = true;
        this.listQuery.page++;
        this.getGoodsList();
    },
    methods: {
        addLike(goodsId, event) {
            this.$API.post("/user/favorite/add/" + goodsId).then((res) => {
                if (res.code == 20000) {
                    wx.showToast({
                        title: "添加成功",
                        icon: "success",
                        duration: 2000,
                    });
                    this.getGoodsList();
                } else {
                    wx.showToast({
                        title: "添加失败，请稍后再试",
                        icon: "error",
                        duration: 2000,
                    });
                }
            });
        },
        changeTab(event) {
            const index = event.mp.detail.index;
            if (this.index != index) {
                this.index = index;
                const idCategory = this.navList[index].id;
                this.listQuery.idCategory = idCategory;
                this.listQuery.page = 1;
                this.goodsList = [];
                this.banners = this.processBanners(this.navList[index].bannerList);
                this.getGoodsList();
            }
        },
        getGoodsList() {
            this.$API
                .get("goods/queryGoods?page=" +
                    this.listQuery.page +
                    "&limit=" +
                    this.listQuery.limit +
                    "&idCategory=" +
                    this.listQuery.idCategory,
                    this.listQuery
                )
                .then(
                    (res) => {
                        let goodsList = res.data.records;
                        for (let i = 0; i < goodsList.length; i++) {
                            goodsList[i].price = utils.formatPrice(goodsList[i].price);
                            goodsList[i].imgUrl = utils.fileMgrUrl + goodsList[i].pic;
                        }
                        this.goodsList = this.goodsList.concat(goodsList);
                    }
                );
        },
        viewGoodsDetail(id) {
            const url = "../goods/index?id=" + id;
            wx.navigateTo({
                url
            });
        },
        processBanners(banners) {
            for (let i = 0; i < banners.length; i++) {
                let url = "";
                let page = banners[i].page;
                let param = banners[i].param;

                if (!utils.startWith(page, "https")) {
                    url = "../" + page + "/index";
                }
                if (param !== "") {
                    const paramJson = JSON.parse(param);
                    let i = 0;
                    for (const key in paramJson) {
                        if (i === 0) {
                            url += "?" + key + "=" + paramJson[key];
                        } else {
                            url += "&" + key + "=" + paramJson[key];
                        }
                        i++;
                    }
                }
                banners[i].url = url;
                banners[i].imgUrl = utils.fileMgrUrl + banners[i].idFile;
            }
            return banners;
        },
    },
    onShow() {
        const token = store.state.token;
        if (token == undefined || token == null || token == "") {
            const url = '../profile/loginOption/index'
            wx.navigateTo({
                url
            })
        } else {
            this.banners = [];
            this.navList = [];
            this.goodsList = [];
            this.activeNav = 0;
            this.$API
                .get("category/list")
                .then((res) => {
                    this.navList = res.data;
                    this.topLoading = false;
                    this.banners = this.processBanners(res.data[0].bannerList)
                    this.listQuery.idCategory = res.data[0].id
                    this.listQuery.page = 1;
                    this.goodsList = []
                    this.getGoodsList()
                })
                .catch((e) => {
                    console.log("e", e);
                    wx.showToast({
                        title: "系统开小差了~", //提示的内容,
                        icon: "error", //图标,
                        duration: 2000, //延迟时间,
                        mask: true, //显示透明蒙层，防止触摸穿透,
                    });
                });
        }

    },
};
</script>

<style>

swiper-item>navigator>image {
    width: 100%;
}
</style>
